import React, { Component } from 'react';
import { Carousel, List, Card } from 'antd';
import { PlayCircleOutlined } from '@ant-design/icons';

export default class Recommend extends Component {
    constructor() {
        super();
        this.state = {
            // 轮播图
            banners: [],
            // 歌单推荐列表
            recommendList: [],
            // 最新音乐
            newSongs: []
        }
    }
    render() {
        return (
            <div className="recommend-container">   
                {/* 轮播图区域 */}
                <Carousel afterChange={(event) => this.onChange(event)}>
                    {
                        this.state.banners.map(item => (
                            <div key={item.encodeId}>
                                <img src={item.imageUrl} alt="" />
                            </div>
                        ))
                    }
                </Carousel>
                {/* 歌单推荐 */}
                <div className="section">
                    <h3>歌单推荐</h3>
                    <List
                        grid={{ gutter: 16, column: 3 }}
                        dataSource={this.state.recommendList}
                        renderItem={item => (
                            <List.Item>
                                <Card onClick={() => this.props.history.push(`/songlist/${item.id}`)}>
                                    <img src={item.picUrl} alt="" />
                                    <p>{item.name.substr(0, 6)}...</p>
                                </Card>
                            </List.Item>
                        )}
                    />
                </div>
                {/* 最新音乐 */}
                <div className="section">
                    <h3>最新音乐</h3>
                    {/*  */}
                    <List
                        size="large"
                        dataSource={this.state.newSongs}
                        renderItem={item => <List.Item
                            onClick={()=>this.props.history.push(`/play/${item.id}`)}
                            actions={[<PlayCircleOutlined style={{ fontSize: 24 }} />]}
                        >{item.name}</List.Item>}
                    />
                </div>
            </div>
        )
    }
    // 轮播图相关事件处理
    onChange(event) {
        console.log(event);
    }
    componentWillMount() {
        this.getBanner();
        this.getRecommend();
        this.getNewSong();
    }

    // 获取轮播图
    async getBanner() {
        const res = await this.$http.get('/banner');
        if (res.code === 200) {
            // 更新数据
            this.setState({ banners: res.banners });
        }
    }

    // 歌单推荐
    async getRecommend() {
        const res = await this.$http.get('/personalized');
        if (res.code === 200) {
            // 更新数据
            this.setState({ recommendList: res.result });
        }
    }

    // 最新音乐
    async getNewSong() {
        const res = await this.$http.get('/personalized/newsong');
        if (res.code === 200) {
            // 更新数据
            this.setState({ newSongs: res.result });
        }
    }

    // 组件即将卸载的时候, 自动执行
    componentWillUnmount(){
        // 对this.setState()方法的功能进行重写
        this.setState=()=>false;
    }
}
